<template>
  <div class="about">
    <div class="about-container">
      <div class="page-header">
        <h1>学院概况</h1>
        <div class="breadcrumb">
          <router-link to="/">首页</router-link> &gt; 学院概况
        </div>
      </div>
      
      <div class="about-content">
        <div class="about-section">
          <h2>学院简介</h2>
          <p>福建农林大学金山学院成立于2002年，是经教育部批准设立的独立学院。学院坐落在福建省福州市仓山区上下店路15号，依托福建农林大学优质教育资源和百年办学经验，坚持"质量立校、人才强校、特色兴校"的办学理念，经过多年的建设和发展，已成为一所以农林、生物、食品、计算机、电子信息等学科为特色的多科性独立学院。</p>
          <p>学院占地面积近1000亩，建筑面积40余万平方米，校园环境优美，设施设备先进。现有18个教学系（部），开设47个本科专业，涵盖农学、理学、工学、经济学、管理学、文学、艺术学等7个学科门类。学院现有教职工1000余人，其中专任教师700余人，具有高级职称的教师占比近40%，具有博士、硕士学位的教师占比超过85%。</p>
          <p>学院注重培养学生的创新精神和实践能力，设有省级实验教学示范中心2个，校级实验教学示范中心5个，各类教学科研实验室100余个。学院积极推进产学研合作，与福建省内外100多家企事业单位建立了稳定的合作关系，为学生提供良好的实习实训条件。</p>
        </div>
        
        <div class="about-section">
          <h2>办学理念</h2>
          <p>学院秉承"厚德博学、笃行致远"的校训，坚持立德树人根本任务，以培养具有扎实专业知识、较强实践能力、良好创新精神和高度社会责任感的应用型人才为目标，不断深化教育教学改革，提高人才培养质量。</p>
          <div class="motto-box">
            <div class="motto-item">
              <div class="motto-title">厚德</div>
              <div class="motto-desc">崇尚美德，培养学生高尚品格</div>
            </div>
            <div class="motto-item">
              <div class="motto-title">博学</div>
              <div class="motto-desc">广泛学习，拓展学生知识视野</div>
            </div>
            <div class="motto-item">
              <div class="motto-title">笃行</div>
              <div class="motto-desc">践行不辍，注重学生实践能力</div>
            </div>
            <div class="motto-item">
              <div class="motto-title">致远</div>
              <div class="motto-desc">志存高远，培养学生远大抱负</div>
            </div>
          </div>
        </div>
        
        <div class="about-section">
          <h2>发展目标</h2>
          <p>学院以习近平新时代中国特色社会主义思想为指导，深入贯彻党的教育方针，落实立德树人根本任务，坚持社会主义办学方向，努力建设特色鲜明的高水平应用型本科院校。到2025年，学院综合实力进入全国同类院校前列，形成农林、生物、信息技术等优势特色学科，为区域经济社会发展提供人才支撑和智力支持。</p>
        </div>
        
        <div class="about-section">
          <h2>院系设置</h2>
          <div class="departments">
            <div class="department-item" v-for="(dept, index) in departments" :key="index">
              <div class="department-name">{{ dept.name }}</div>
              <div class="department-majors">
                <span v-for="(major, mIndex) in dept.majors" :key="mIndex">{{ major }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutView',
  data() {
    return {
      departments: [
        { 
          name: '信息工程学院', 
          majors: ['计算机科学与技术', '软件工程', '网络工程', '电子信息工程', '通信工程'] 
        },
        { 
          name: '经济与管理学院', 
          majors: ['会计学', '财务管理', '市场营销', '国际经济与贸易', '人力资源管理'] 
        },
        { 
          name: '农业与食品科学学院', 
          majors: ['农学', '园艺', '植物保护', '食品科学与工程', '食品质量与安全'] 
        },
        { 
          name: '生物科学与工程学院', 
          majors: ['生物技术', '生物工程', '制药工程', '环境工程', '环境科学'] 
        },
        { 
          name: '文学与传媒学院', 
          majors: ['汉语言文学', '新闻学', '广告学', '网络与新媒体', '视觉传达设计'] 
        },
        { 
          name: '外国语学院', 
          majors: ['英语', '日语', '商务英语', '翻译'] 
        }
      ]
    }
  }
}
</script>

<style scoped>
.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
  border-bottom: 2px solid #c22;
  padding-bottom: 15px;
}

.page-header h1 {
  color: #333;
  font-size: 28px;
  margin-bottom: 10px;
}

.breadcrumb {
  font-size: 14px;
  color: #666;
}

.breadcrumb a {
  color: #c22;
  text-decoration: none;
}

.about-content {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.about-section {
  margin-bottom: 30px;
}

.about-section h2 {
  color: #c22;
  font-size: 22px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.about-section p {
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
  text-align: justify;
}

.motto-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 20px 0;
}

.motto-item {
  width: 23%;
  background-color: #f9f0e6;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 15px;
}

.motto-title {
  font-size: 24px;
  font-weight: bold;
  color: #c22;
  margin-bottom: 10px;
}

.motto-desc {
  color: #666;
}

.departments {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.department-item {
  width: 30%;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border-left: 4px solid #c22;
}

.department-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  font-size: 18px;
}

.department-majors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.department-majors span {
  background-color: #eee;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 13px;
  color: #666;
}

@media (max-width: 768px) {
  .motto-item {
    width: 48%;
  }
  
  .department-item {
    width: 100%;
  }
}
</style>
